import {
  Button,
  Cascader,
  DatePicker,
  Form,
  Input,
  InputNumber,
  Radio,
  Select,
  Switch,
  TreeSelect,
} from 'antd';
import type{InputProps,DatePickerProps,SelectProps,ButtonProps} from 'antd'
import { CellType,InputTypes ,SearchOptions} from "./SearchType";
// 输入框类型
export const SearchInput = (props:SearchOptions<InputProps>)=>{
  return  (
  <Form.Item {...props.item}>
      <Input className='w-full' {...props.options}/>
  </Form.Item>
  )
}
// 下拉列表类型
export const SearchSelect = (props:SearchOptions<SelectProps>)=>{
  return  (
  <Form.Item {...props.item}>
    <Select  className='w-full' {...props.options}>
    </Select>
  </Form.Item>
  )
}
// 日期类型
export const SearchDatePick = (props:SearchOptions<DatePickerProps>)=>{
  return  (
  <Form.Item {...props.item}>
      <DatePicker  className='w-full' {...props.options}/>
  </Form.Item>
  )
}
// 检索表单类型渲染列表
const SearchTypeList:any = {
  [InputTypes.INPUT]:{
    renderFromItem:(props:any) => {
      return <SearchInput {...props.config}></SearchInput>
    }
  },
  [InputTypes.SELECT]:{
    renderFromItem:(props:any) => {
      return <SearchSelect {...props.config}></SearchSelect>
    }
  },
  [InputTypes.DATERANGE]:{
    renderFromItem:(props:any) => {
      return <SearchDatePick {...props.config}></SearchDatePick>
    }
  }
}
// 检索表单类型以及参数
export interface ConfigType{
  types:InputTypes, //表单类型
  config:SearchOptions<any>, 
  // config:SearchOptions<InputProps|InputNumberProps|SelectProps|ButtonProps>,
}
// 根据类型渲染 ！！
export const SearchConfig = (props:ConfigType) => {
  return SearchTypeList[props.types].renderFromItem(props)
}